<template>
  <div>
    <div class="top">
      <!-- 筛选 -->
      <div class="screening">
        <span>筛选：</span>
        <el-radio v-model="screening" :label="false" @click.native="screenList=''">全部数据</el-radio>
        <el-radio
          v-model="screening"
          :label="true"
          @click.native="dialog=true;"
          style="margin-left:-14px;"
        >高级筛选</el-radio>
      </div>
      <!-- 时间+部门+关键字查询 -->
      <div class="box">
        <div class="dateSearch">
          <el-radio v-model="radio" :label="true" @click.native="dateValue='';flag=true">全部时间段</el-radio>
          <el-radio
            v-model="radio"
            :label="false"
            @click.native="flag=false"
            style="margin-left:-14px;"
          >指定时间段</el-radio>
          <el-date-picker
            :disabled="flag"
            class="picker"
            size="small"
            v-model="dateValue"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            unlink-panels
            :picker-options="pickerOptions"
          ></el-date-picker>
        </div>
        <div class="bmtype">
          <span>部门筛选：</span>
          <el-select
            class="bm-input"
            v-model="bm"
            size="small"
            multiple
            collapse-tags
            style="margin-left: 20px;"
            :placeholder="this.$store.state.power<=0?'所有部门':this.$store.state.bm"
            :disabled="this.$store.state.power<=0?false:true"
          >
            <el-option v-for="(item,index) in bmType" :key="item" :label="item" :value="++index"></el-option>
          </el-select>
        </div>
        <div class="textSearch">
          <div class="textSearchSun">
            <el-input
              size="small"
              placeholder="请输入姓名"
              prefix-icon="el-icon-search"
              v-model="textSearch"
            ></el-input>
            <el-button
              @click="searchList(1)"
              size="small"
              type="primary"
              style="margin-left:6px;"
            >查询</el-button>
          </div>
        </div>
      </div>
      <div class="searchCount">
        <div>{{searchCount}}</div>
        <div>
          <el-link @click="getExcel" style="font-size:14px;" type="success">导出为Excel</el-link>
        </div>
      </div>
      <!-- 数据表格 -->
      <div class="dataList">
        <el-table
          :data="tableData"
          size="medium"
          stripe
          border
          :header-cell-style="headClass"
          :cell-style="tableClass"
          style="width: 100%"
        >
          <el-table-column prop="bm" label="1.部门名称" width="180" fixed></el-table-column>
          <el-table-column prop="xm" label="2.申报人姓名" width="140" fixed></el-table-column>
          <el-table-column :formatter="dateFormat" prop="created" label="提交时间" width="180"></el-table-column>
          <el-table-column prop="dh" label="3.移动电话" width="150"></el-table-column>
          <el-table-column prop="cqqk" label="4.出勤情况" width="170"></el-table-column>
          <el-table-column prop="bgwz" label="5.办公位置" width="150"></el-table-column>
          <el-table-column prop="fjh" label="房间号" width="150"></el-table-column>
          <el-table-column prop="bgdh" label="6.办公室电话" width="150"></el-table-column>
          <el-table-column prop="tw" label="7.当日晨测体温（单位:摄氏度）" width="150"></el-table-column>
          <el-table-column prop="jkqk" label="8.当日是否有咳嗽、胸闷、乏力等不适症状?" width="180"></el-table-column>
          <el-table-column prop="qyqk" label="9.当日接触的亲友有无发热、咳嗽、胸闷乏力等症状?" width="200"></el-table-column>
          <el-table-column prop="jcs" label="10.两周内是否接触过以下人员" width="150"></el-table-column>
          <el-table-column prop="xc" label="11.两周内行程" width="150"></el-table-column>
          <el-table-column prop="zxzs" label="12.是否在校住宿" width="150"></el-table-column>
          <el-table-column prop="ggct" label="13.是否在校公共餐厅用餐" width="150"></el-table-column>
          <el-table-column prop="qdwz" label="14.签到位置" width="400"></el-table-column>
          <el-table-column prop="bz" label="15.备注" width="400"></el-table-column>
          <el-table-column prop="no" label="序号" width="80"></el-table-column>
        </el-table>
      </div>
      <div class="pager">
        <el-pagination
          small
          background
          layout="prev ,pager,next"
          :total="pagesizeCount"
          :pager-count="7"
          :page-size="pagesize"
          :current-page.sync="currpage"
          @current-change="getNewlist(currpage)"
        ></el-pagination>
      </div>
    </div>

    <!-- 完成弹出框表单 -->
    <div class="tanBox">
      <el-dialog
        title="高级筛选"
        width="700px"
        :visible.sync="dialog"
        center
        @close="screenList==''?screening=false:''"
      >
        <div class="block">
          <el-cascader-panel v-model="screenList" :options="options" :props="props"></el-cascader-panel>
          <div class="btnBox">
            <div>
              <el-link type="danger" @click="screenList='';bm=[]">点击清除</el-link>
            </div>
            <div>
              <el-button type="primary" size="small" @click="dialog=false;">确定</el-button>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      screening: false, //筛选数据
      radio: false, //指定时间段
      flag: false, //日期选择器禁用
      textSearch: "", //关键字查询
      excelBtn: true, //导出按钮禁用
      dateValue: [new Date(), new Date()], //日期时间
      bm: [], //部门筛选
      tableData: [], // 数据列表
      currpage: 1, //当前页码
      pagesize: 15, //每页展示数目
      pagesizeCount: 0, //总条数
      searchCount: "", //查询到数量
      dialog: false,
      //筛选数据
      screenList: "",
      props: { multiple: true },
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 29);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }, //快捷日期选项
      bmType: [], //部门
      options: [
        // {
        //   value: "cqqk",
        //   label: "4.出勤情况",
        //   children: [
        //     {
        //       value: "到岗(特指在线办公、居家办公)",
        //       label: "到岗(特指在线办公、居家办公)"
        //     },
        //     { value: "在校办公", label: "在校办公" },
        //     { value: "事假", label: "事假" },
        //     { value: "病假", label: "病假" },
        //     { value: "产假（陪产假", label: "产假（陪产假" },
        //     { value: "企业顶岗", label: "企业顶岗" },
        //     { value: "访学进修", label: "访学进修" },
        //     { value: "读博", label: "读博" },
        //     { value: "其他", label: "其他" }
        //   ]
        // },
        // {
        //   value: "bgwz",
        //   label: "5.办公位置",
        //   children: [
        //     { value: "行政楼", label: "行政楼" },
        //     { value: "综合楼", label: "综合楼" },
        //     { value: "图书馆", label: "图书馆" },
        //     { value: "学生活动中心", label: "学生活动中心" },
        //     { value: "实训楼8栋", label: "实训楼8栋" },
        //     { value: "实训楼9栋", label: "实训楼9栋" },
        //     { value: "实训楼10栋", label: "实训楼10栋" },
        //     { value: "教学楼1栋", label: "教学楼1栋" },
        //     { value: "教学楼2栋", label: "教学楼2栋" },
        //     { value: "教学楼3栋", label: "教学楼3栋" },
        //     { value: "教学楼4栋", label: "教学楼4栋" },
        //     { value: "其他", label: "其他" }
        //   ]
        // },
        {
          value: "jkqk",
          label: "8.当日是否有咳嗽、胸闷、乏力等不适症状",
          children: [
            { value: "是", label: "是" },
            { value: "否", label: "否" }
          ]
        },
        {
          value: "qyqk",
          label: "9.当日接触的亲友有无发热、咳嗽、胸闷乏力等症状",
          children: [
            { value: "无身体不适", label: "无身体不适" },
            { value: "有其中一项或多项症状", label: "有其中一项或多项症状" }
          ]
        },
        {
          value: "jcs",
          label: "10.两周内是否接触过以下人",
          children: [
            { value: "无相关接触史", label: "无相关接触史" },
            { value: "湖北地区回来人员", label: "湖北地区回来人员" },
            { value: "温州地区回来人员", label: "温州地区回来人员" },
            { value: "确诊或疑似病患", label: "确诊或疑似病患" }
          ]
        },
        {
          value: "xc",
          label: "11.两周内行程",
          children: [
            { value: "在广州", label: "在广州" },
            { value: "在广州以外其它地区", label: "在广州以外其它地区" },
            { value: "广东省内返穗", label: "广东省内返穗" },
            { value: "外省返穗", label: "外省返穗" }
          ]
        },
        {
          value: "zxzs",
          label: "12.是否在校住宿",
          children: [
            { value: "是", label: "是" },
            { value: "否", label: "否" }
          ]
        },
        {
          value: "ggct",
          label: "13.是否在校公共餐厅用餐",
          children: [
            { value: "是", label: "是" },
            { value: "否", label: "否" }
          ]
        }
      ] //级联选择器
    };
  },
  created() {
    this.$axios
      .get("/api/getBmStrList")
      .then(res => {
        this.bmType = res.data.data;
      })
      .catch(err => {
        console.log(err);
      });
  },
  mounted() {
    this.searchList();
  },
  methods: {
    //导出为Excel表格(.xls文件)
    getExcel() {
      if (this.excelBtn) {
        this.excelBtn = false;
        let startTime = "",
          endTime = "",
          filter = [],
          bmList = [],
          textKey = this.textSearch,
          pageNum = 1;
        if (this.flag == false && this.dateValue !== "") {
          startTime = this.dateFt(this.dateValue[0]);
          endTime = this.dateFt(this.dateValue[1]);
        }
        if (this.$store.state.power <= 0) {
          bmList = this.bm;
        }
        if (this.screenList !== "") {
          this.screenList.forEach(item => {
            let json = {};
            json[item[0]] = item[1];
            filter.push(json);
          });
        }
        this.$axios
          .post(
            "/api/form/export/?p=" + this.$store.state.power,
            {
              startTime,
              endTime,
              filter,
              bmList,
              textKey,
              pageNum
            },
            { responseType: "blob" }
          )
          .then(res => {
            if (window.navigator.msSaveBlob) {
              //IE兼容
              window.navigator.msSaveBlob(res.data, "考勤登记数据表.xls");
            } else {
              const link = document.createElement("a");
              let blob = new Blob([res.data], {
                type: "application/vnd.ms-excel;charset=utf-8"
              });
              link.style.display = "none";
              link.href = URL.createObjectURL(blob);
              link.download = "考勤登记数据表.xls";
              document.body.appendChild(link);
              link.click();
              document.body.removeChild(link);
            }
            this.excelBtn = true;
          })
          .catch(err => {
            this.excelBtn = true;
            console.log(err);
          });
      }
    },
    //获取数据列表
    searchList(cpage) {
      this.searchCount = "查询中...";
      this.currpage = cpage;
      let startTime = "",
        endTime = "",
        filter = [],
        bmList = [],
        textKey = this.textSearch,
        pageSize = this.pagesize,
        pageNum = cpage;

      //日期
      if (this.flag == false && this.dateValue !== "") {
        startTime = this.dateFt(this.dateValue[0]);
        endTime = this.dateFt(this.dateValue[1]);
      }
      //筛选部门
      if (this.$store.state.power <= 0) {
        bmList = this.bm;
      }
      //筛选数据
      if (this.screenList !== "") {
        this.screenList.forEach(item => {
          let json = {};
          json[item[0]] = item[1];
          filter.push(json);
        });
      }
      //查询请求
      this.$axios
        .post("/api/form/getList/?p=" + this.$store.state.power, {
          startTime,
          endTime,
          filter,
          bmList,
          textKey,
          pageSize,
          pageNum
        })
        .then(res => {
          this.pagesizeCount = res.data.data.count;
          this.searchCount = `共查询到 ${this.pagesizeCount} 条数据`;
          this.tableData = res.data.data.list;
        })
        .catch(err => {
          this.$message.error("查询失败");
          this.searchCount = `查询失败`;
        });
    },
    //日期格式转换函数
    dateFt(time) {
      let date = new Date(time);
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 <= 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D = date.getDate() + 1 <= 10 ? "0" + date.getDate() : date.getDate();
      return Y + M + D;
    },
    //切换页数
    getNewlist(cpage) {
      this.searchList(cpage);
    },
    //列表日期格式
    dateFormat(row, column, cellValue) {
      let date = new Date(cellValue.replace(/-/g, "/")); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 <= 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D =
        (date.getDate() + 1 <= 10 ? "0" + date.getDate() : date.getDate()) +
        " ";
      let h =
        (date.getHours() + 1 <= 10 ? "0" + date.getHours() : date.getHours()) +
        ":";
      let m =
        (date.getMinutes() + 1 <= 10
          ? "0" + date.getMinutes()
          : date.getMinutes()) + ":";
      let s =
        (date.getSeconds() + 1 <= 10
          ? "0" + date.getSeconds()
          : date.getSeconds()) + " ";
      return Y + M + D + h + m + s;
    },
    // 表头样式设置
    headClass() {
      return "background-color:rgb(245, 245, 245);color:#383838;";
    },
    // 单元格样式
    tableClass() {
      return "color:#808080";
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  .top {
    margin-bottom: -80px;
    font-size: 14px;
    color: #383838;
    .screening {
      margin-left: 340px;
      margin-bottom: 20px;
      width: 280px;
    }
    .box {
      display: flex;
      justify-content: space-between;
      padding-left: 4px;
      .el-date-editor {
        width: 280px;
      }
      .bmtype {
        span {
          margin-right: -20px;
        }
        .bm-input {
          width: 170px;
        }
      }
      .picker {
        margin-left: -20px;
      }
      .textSearchSun {
        display: flex;
        justify-content: space-between;
        width: 240px;
      }
    }
    .searchCount {
      display: flex;
      justify-content: space-between;
      height: 20px;
      margin-top: 10px;
      margin-left: 4px;
      font-size: 16px;
    }
    .dataList {
      margin-top: 6px;
    }
    .pager {
      margin-top: 20px;
      margin-left: 300px;
    }
  }
  .tanBox {
    .block {
      .btnBox {
        display: flex;
        justify-content: space-between;
        margin-top: 4px;
      }
    }
  }
}
</style>